<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-row>
                    <el-form-item style="float:right;">
                        <el-button size="small" type="primary" icon="plus" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="clauses" stripe border :height="winHeight-188" highlight-current-row v-loading="listLoading"  style="width: 100%;">
            <el-table-column prop="serialNo" align="center" label="排序号" width="100">
            </el-table-column>
            <el-table-column prop="inputId" align="center" label="输入配置ID" min-width="130" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="inputName" align="center" label="输入配置名字" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed='right'>
                <template scope="scope">
                    <el-button  size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">配置</el-button>

                </template>
            </el-table-column>

        </el-table>

        <!-- 新增界面 -->
        <el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
          <el-form label-width="100px" :model="addForm" :rules="addFormRules" ref="addForm">
            <el-row>
              <el-col :xs="24" :sm="20" :md="12" :lg="12">
                <el-form-item label="排序id:" prop="serialNo">
                  <el-input v-model="addForm.serialNo" auto-complete="off">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="20" :md="12" :lg="12">
                <el-form-item label="输入配置id:" prop="inputId">
                  <el-input v-model="addForm.inputId" auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xs="24" :sm="20" :md="12" :lg="12">
                  <el-form-item label="输入配置名字:" prop="inputName">
                      <el-input  v-model="addForm.inputName" auto-complete="off"></el-input>
                    </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click.native="addFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
          </div>
        </el-dialog>
        <!-- 配置-->
        <el-dialog title="设置自定义" v-model="PlanFormVisible" :close-on-click-modal="false">
            <!-- :rules="PlanFormRules" -->
            <el-form label-width="120px" :model="PlanForm"  ref="PlanForm">
                <el-button type="primary" size="small" @click="planAdd">添加</el-button>
                <el-collapse accordion style="margin-top:20px;" @change="collapseChange">
                    <el-collapse-item v-for="(temp,index) in PlanForm.configContent" :key="index" :name="planName(index)">
                        <template slot="title">
                            {{plantitle(index)}}
                            {{datas.key}}
                            <el-button type="danger" size="small" v-show="planShow(index)" style="float:right; margin-top:8px;margin-right:15px;" @click="planRemove(index)">删除</el-button>
                            <!-- <el-button type="warning" size="small" v-show="planStatus(index,true)" style="float:right; margin-top:8px;margin-right:15px;" @click="planInvalid(index)">失效</el-button> -->
                            <!-- <el-button type="primary" size="small" v-show="planStatus(index,false)" style="float:right; margin-top:8px;margin-right:15px;" @click="planRecover(index)">恢复</el-button> -->

                        </template>
                        <el-row>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="输入类型:">
                                    <!-- <el-input v-model="temp.inputType" auto-complete="off"></el-input> -->
                                    <el-select v-model="temp.inputType">
                                        <el-option label="输入框" value="1"></el-option>
                                        <el-option label="选择框" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="关键字:">
                                    <el-input v-model="temp.key" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="是否必须">
                                    <el-select size="small"  v-model="temp.isMust" >
                                        <el-option label="否" value="0"></el-option>
                                        <el-option label="是" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="默认">
                                    <el-input v-model="temp.default" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="类型">
                                    <el-select size="small"  v-model="temp.type" >
                                        <el-option label="补充信息" value="3"></el-option>
                                        <el-option label="上传信息" value="4"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="正则表达式">
                                    <el-input v-model="temp.regExp" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="最大" prop="max">
                                    <el-input v-model="temp.max" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="最小" prop="min">
                                    <el-input v-model="temp.min" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item label="缩略图:">
                                  <el-upload class="upload-demo" 
                                        :limit="1"
                                        :action="picURL" 
                                        :on-success="editSuccessDetailUrl" 
                                        :on-remove="editRemoveDetailUrl" 
                                        :file-list="fileList2imgUrl" 
                                        list-type="picture"  
                                        :data="{parampath:articlepicture}">
                                    <el-button size="small" :disabled="canUploadDis" @click="inputUpload(index)" type="primary">点击上传</el-button>
                                  </el-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="20" :md="16" :lg="12">
                                <el-form-item>
                                    <el-button type="primary" class="button_style" size="small" @click="addKeyValue(temp.seleList)">增加键值</el-button>
                                </el-form-item>
                            </el-col>
                        </el-row>
                         <el-row v-for="(seleListItem,index) in temp.seleList" :key="index">
                          <el-col :xs="20" :sm="12" :md="12" :lg="8">
                            <el-form-item :label="'键'+(index+1)+':'" prop="productCname">
                              <el-input v-model="seleListItem.key"  auto-complete="off"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :xs="20" :sm="12" :md="12" :lg="8">
                            <el-form-item :label="'值'+(index+1)+':'" prop="productCname">
                              <el-input v-model="seleListItem.value" auto-complete="off"></el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :xs="20" :sm="12" :md="12" :lg="8">
                            <el-form-item  prop="productCname">
                              <el-button type="danger" class="button_style" size="small" @click="removeKeyValue(temp.seleList,index)">删除</el-button>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <!-- <el-form-item label="投保声明:" prop="name" style="margin-top:10px;">
                            <div class="kboder" @click='statement(temp,index,"statement"+index)' style="height:80px;min-width:140px;width:88%;">
                                <div :id="'statement'+index" class="ksboder">
                                </div>
                            </div>
                        </el-form-item> -->
                        <!-- <el-form-item label="理赔须知:" prop="name" style="margin-top:10px;">
                            <div class="kboder" @click="notice(temp,index,'notice'+index)" style="height:80px;min-width:140px;width:88%;">
                                <div :id="'notice'+index" class="ksboder">
                                </div>
                            </div>
                        </el-form-item> -->
                    </el-collapse-item>
                </el-collapse>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!--" -->
                <el-button  @click.native="PlanFormVisible = false;ISstatement=false;ISnotice=false;">取消</el-button>
                <!-- @click.native="PlanSubmit" :loading="PlanLoading" -->
                <el-button type="primary" @click.native="PlanSubmit">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>
<script>
import util from '../../common/js/util'
import { mapState, mapActions } from 'vuex'
import commons from '../../common/js/common'
import {addPetConfig, petConfigList,picURL,base} from '../../api/api';
import editor from '../../components/Quilleditor.vue'
export default {
    data() {
        return {
            filters: {
                title: '',
                type: ''
            },
            addFormRules: {
                inputId: [
                  { required: true, message: '请输入配置ID', trigger: 'blur' }
                ],
                inputName: [
                  { required: true, message: '请输入配置名字', trigger: 'blur' }
                ],
                serialNo: [
                  { required: true, message: '请输入排序号', trigger: 'blur' }
                ]
            },
            PlanForm: {
                configContent: [{
                    inputType: '',
                    key: '',
                    isMust: '',
                    default: '',
                    type: '',
                    imgUrl: '',
                    max: '',
                    min: '',
                    regExp: '',
                    // seleList: [{
                    //     key: '',
                    //     value:''
                    // }]
                    seleList:[{
                        key:'',
                        value:''
                    }]
                }],
            },
            addForm: {
                serialNo:'',
                inputId:'',
                inputName:'',
                configContent: '',
            },
            editForm: {
                id:'',
                serialNo:'',
                inputId:'',
                inputName:'',
                configContent: '',
            },
            listLoading:false,
            addFormVisible:false,
            canUploadDis:false,
            addLoading:false,
            PlanFormVisible: false,
            loading: '',
            picURL: picURL,
            fileList1imgUrl: [],
            fileList2imgUrl: [],
            articlepicture: '',
            uploadIndex:'',
            uploadUrl: base + '/cxb/admin/uploadWeb/upload',
            lists: [],
            total: 0,
            exportTotal: 0,
            clauses: [],
            defaultData: [],
            datas:[],
            text:[],
            updateBtnVisible: false,
        }
    },
    computed: mapState({
        clist: 'riskCodelist',
        winHeight: 'winHeight'
    }),
    methods: {
        // ...mapActions([
        //     'CodeList'
        // ]),

        //获取用户列表
        getcustoms(bool) {
            this.listLoading = bool;
            if (!bool) {
                this.loading = this.$loading({
                    lock: true,
                    text: '正在导出',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            }
            petConfigList().then((res) => {
                this.lists = res.data.result;
                this.total = res.data.result.totalElements;
                this.exportTotal = res.data.result.totalElements;
                this.listLoading = false;

                if (!bool) {
                    this.loading.close();
                    this.export2Excel();
                }
                else {
                    this.clauses = res.data.result;
                    this.defaultData = res.data.result;
                }
            });
        },
        inputUpload:function (index) {
            console.log(index);
            this.uploadIndex=index;
        },
        addKeyValue:function (row) {
            console.log(row);
            if(!row){
                row.push({
                    key:'',
                    value:''
                });
            }else{
                row.push({
                    key:'',
                    value:''
                });
            }
        },

        removeKeyValue:function (row,index) {
            console.log(row);
            if(index>0){
                row.splice(index,1);
            }
        },
        //显示修改界面
        handleEdit: function (index,row) {
            console.log(row);
            this.fileList2imgUrl = [];
            this.editForm = Object.assign({}, row);
            if (!row.configContent) {
                this.PlanForm={
                    configContent: [{
                        inputType: '',
                        key: '',
                        isMust: '',
                        default: '',
                        type: '',
                        imgUrl: '',
                        max: '',
                        min: '',
                        regExp: '',
                        seleList: [{
                            key: '',
                            value:''
                        }]
                    }],
                }
            }else{
                var data = JSON.parse(row.configContent);
                for (let i in data) {
                    console.log(data[i].isMust);
                    if (data[i].isMust==true) {

                        data[i].isMust='1';
                    }else{
                        data[i].isMust='0';
                    }
                    console.log(data[i].isMust);
                }
                setTimeout(() => {
                    this.PlanForm.configContent=data;
                }, 500);
            }
            this.PlanFormVisible = true;
            var nowTime = Date.parse(new Date());
            this.articlepicture = 'input/' + commons.getDaytime(nowTime, 3, false);
        },

        
        //新增
        handleAdd: function () {
            this.addFormVisible = true;
        },
        collapseChange: function (index) {
            console.log(this.PlanForm.configContent);
            if (this.PlanForm.configContent) {
                if (this.PlanForm.configContent[index]) {
                    if (this.PlanForm.configContent[index].imgUrl) {
                        this.fileList2imgUrl=[];
                        this.fileList2imgUrl.push({
                            name: this.PlanForm.configContent[index].imgUrl,
                            url: this.PlanForm.configContent[index].imgUrl
                        });
                    }
                }
            }
            if (this.fileList2imgUrl.length>=1) {
                this.canUploadDis = true;
            }else{
                this.canUploadDis = false;
            }
            console.log(this.fileList2imgUrl);
            // var tempdata = [];
            let _this = this;
            try {
                if (index >= 0) {
                    _this.commonIndex = index;
                    $('#statement' + index).html(_this.PlanForm.configContent[index].statement);
                    $('#notice' + index).html(_this.PlanForm.configContent[index].notice);
                }
            }
            catch (err) {
            }
        },
        // 定义唯一标识符
        planName: function (index) {
            return index;
        },
        planShow: function (index) {
            var length = this.PlanForm.configContent.length;
            if (length <= 1) {
                return false;
            }
            else {
                return true;
            }
        },
        planRemove: function (index) {
            this.PlanForm.configContent.splice(index, 1);
        },
        planInvalid: function (index) {
            this.PlanForm.configContent[index].status = '0';
        },
        plantitle: function (index) {
            var number;
            number = parseInt(index) + 1;
            return '内容' +' '+ number;
        },
        addSubmit: function () {
          this.$refs.addForm.validate((valid) => {
            if (valid) {
              this.$confirm('确认提交吗？', '提示', {}).then(() => {
                this.addLoading = true;
                let para = this.addForm;
                addPetConfig(para).then((res) => {
                  this.addLoading = false;
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                  this.$refs['addForm'].resetFields();
                  this.addFormVisible = false;
                  this.getcustoms(true);
                });
              });
            }
          });
        },
        // 点击添加面板
        planAdd: function () {
            this.PlanForm.configContent.push({
                inputType:'',
                key:'',
                isMust: '',
                default:'',
                type:'',
                imgUrl:'',
                max:'',
                min:'',
                regExp :'',
                seleList:[{
                    key: '',
                    value:''
                }] 
            });
        },
        PlanSubmit: function () {
          console.log(this.PlanForm);
          var temp = this.PlanForm.configContent.length;
          for (var i in this.PlanForm.configContent) {
            this.PlanForm.configContent[i].limitTerm = JSON.stringify(this.PlanForm.configContent[i].classlevel);
          }
          this.editForm.configContent = JSON.stringify(this.PlanForm.configContent);
          console.log(this.editForm);
          // this.$refs.PlanForm.validate((valid) => {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.PlanLoading = true;
            let para = this.editForm;
            addPetConfig(para).then((res) => {
              this.PlanLoading = false;
              //NProgress.done();
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.PlanFormVisible = false;
              this.getcustoms(true);
            }).catch(() => {
              this.PlanLoading = false;
            });
          });
      // });
        },
       
        editSuccessDetailUrl(response, file, fileList) {
            
            this.PlanForm.configContent[this.uploadIndex].imgUrl = location.protocol + "//" + location.hostname + response;
            console.log(this.PlanForm.configContent[this.uploadIndex].imgUrl);
            this.canUploadDis = true;
        },
        editRemoveDetailUrl(file, fileList) {
            this.fileList2imgUrl.splice(this.uploadIndex, 1);
            if (true) {
                if (this.fileList2imgUrl.length>=1) {
                    this.canUploadDis = true;
                }else{
                    this.canUploadDis = false;
                }
            }
        },
    },
    mounted() {
      this.getcustoms(true);
    }
}

</script>
